<%@ page import="cn.gpnu.domain.User" %>
<%@ page import="cn.gpnu.dao.Userdao" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Time</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>专注Time</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        .div_1{
            margin-top: 100px;
        }
        div{
            margin-top: 70px;
            margin-bottom: 200px;
        }
        .p_1{
            text-align: center;
            font-size: 200%;
        }
        .p_2{
            text-align: left;
        }
        .p_4{
            text-align: center;
            font-size: 200%;
        }
        .second{
            color: green;
        }
        .tip{
            color: darkgoldenrod;
        }

        body{
            background: darkseagreen;
        }
        .form-control1{
            width: 100px;
            margin: auto;
            border-radius: 5px;
            padding-left: 15px;
        }
        .div_2{
            margin-top: -100px;
            width: 250px;
            height: 300px;
            margin: auto;
        }
        .btn btn-success{
            width: 100px;
        }
        .pass_time{
            color: red;
            
        }
        .gold{
            margin-left: 20px;
            margin-top: 10px;
            color: gold;
            text-align: left;
            font-size: 150%;
        }
        .gold_pic{
            width: 30px;
            height: 30px;
            margin-bottom: 10px;
        }
        .btn_shop{
            text-decoration: #5cb85c;
        }
        .shop_pic{
            width: 40px;
            height: 40px;
        }
        .today_time{
            height: 10px;
            position: absolute;
            bottom: 90%;
            right: 39%;
            font-size: 110%;
            font-weight: lighter;
            color: white;
        }
        .btn{
            width: 130px;
        }
        .logo{
            height: 60px;
            position: absolute;
            bottom: 6%;
            right: 4%;
        }
    </style>
</head>
<base href="<%=basePath%>">
<title>My JSP 'demo.jsp' starting page</title>
<body id="body" onload="showUser()">
<%--${user}--%>
<%
    User user = (User) session.getAttribute("user");
//    int gold = user.getGold();
%>


 <input type="hidden" id="id" value="<%=user.getId()%>"/>
<input type="hidden" id="now_tree" value="<%=user.getNow_tree()%>"/>
<input type="hidden" id="today_time_input" value=<%=user.getToday_study_time()%>/>
<input type="hidden" id="user_gold" value=<%=user.getGold()%>

<form class="p_2">
<%--    <span>--%>
<%--        进入商店--%>
<%--    </span>--%>
    <tr>
        <td>
            <span id="display_gold" class="gold">

                </span>
            <img src="img/gold.png" class="gold_pic" >
        </td>

        <td>
            <span class="gold"><a href="/Login_Forest/JSP/Home.jsp">我的主页</a>
                </span>
            <img src="img/默认头像.png" class="gold_pic" >
        </td>

        <td>
            <span class="gold" style="float: right">
                <a href="select_tree?id=<%=user.getId()%>"><span>更换树种</span></a>
                        <img src="img/小树11.png" class="shop_pic">
            </span>
        </td>
        <td>
            <span class="gold" style="float: right">
                <a href="select_tree?id=<%=user.getId()%>"><span>进入商店</span></a>
<%--                <button id = "shop" type="button" class="btn btn-link"><span style="font-size: 200%">进入商店</span></button>--%>
                        <img src="img/shop.png" class="shop_pic">
            </span>
        </td>
        <td>
            <P class="p_4">
                <span class="today_time" id = "today_time"></span>
            </P>
        </td>
    </tr>

</form>

<div>

    <div class="div_1">

        <div class="div_2">
            <img id = "tree" src="https://ae01.alicdn.com/kf/U057e7bac9c504a7d868cc38cc7db6c46F.jpg" class="img-responsive img-circle center-block" >
        </div>
        <p class="p_1">
            <button id = "button_02" type="button" class="btn btn-success btn-lg">Rest</button>
            <input type="number" name = "minute" class="form-control1 " id="input_minute" placeholder="分" value="25">:
            <input type="number" name = "second" class="form-control1 " id="input_second" placeholder="秒">
            <button id = "button_01" type="button" class="btn btn-success btn-lg">START</button>

            <br>
            <span class="second" id ="minute">(👆输入时间)</span>
            <span class="second" id ="second"></span>
            <span  id = "rest_1" class="tip">之后，成长为寒假🎄</span>
            <br>
            <span id = "rest_2"class="second">你已经专注了📕</span>
            <span class="pass_time" id = "passtime_minute">0</span>
            <span class="second">分</span>
            <span class="pass_time" id = "passtime_second">0</span>
            <span class="second">秒</span><br><br/>
            <button id = "absorbed" type="button" class="btn btn-info btn-lg">查看作业</button><br><br>
        </p>

    </div>
<%--    <div>--%>
<%--        <img  class="logo" src = "https://forest-mt-s3.seekrtech.com/assets/images/desktop/forest_logo.svg">--%>
<%--    </div>--%>
</div>



<script>
    var user_gold = document.getElementById("user_gold").value;
    var display_gold = document.getElementById("display_gold");
    display_gold.innerHTML = "您的金币:"+user_gold;
    var now_tree;
    var shop = document.getElementById("shop");
    var second = document.getElementById("second");
    var minute = document.getElementById("minute");
    var button_01 = document.getElementById("button_01");
    var button_02 = document.getElementById("button_02");
    var passtime_second = document.getElementById("passtime_second");
    var passtime_minute = document.getElementById("passtime_minute");
    var rest_1 = document.getElementById("rest_1");
    var rest_2 = document.getElementById("rest_2");
    var absorbed = document.getElementById("absorbed");
    var body = document.getElementById("body");
    var tree = document.getElementById("tree");
    var change_tree = document.getElementById("change_tree");
    var today_time = document.getElementById("today_time");
    var today_time_input = document.getElementById("today_time_input");
    today_time.innerHTML = "今天您已经专注了"+parseInt(today_time_input.value)+"分钟!";
    var time;
    var passtime = 0;
    var flag = 0;
    var id ;
    var gold;
    var boolean = true ;

    absorbed.onclick = function () {
        window.open("/Login_Forest/TakeText?user_id="+id+"");
    }


    function showUser(){
        id = document.getElementById("id").value;//通过那个隐藏表单就获取到了需要的值，成功传入JS代码中
        now_tree = document.getElementById("now_tree").value;
    }

    // function add_gold() {
    //
    //     // $.get("add_servlet",{id:id,gold:gold},function (data) {
    //     //     alert(data);
    //     // },"text")
    //     //发送异步请求,1创建核心对象
    //     var xmlhttp;
    //     if(window.XMLHttpRequest){
    //         xmlhttp = new  XMLHttpRequest();
    //     }
    //     else {
    //         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    //     }
    //     alert(gold);
    //     //2建立连接
    //     xmlhttp.open("GET","add_servlet?id="+id+"&gold="+gold+"",true);
    //     //3发送请求
    //     xmlhttp.send();
    //     //4响应请求
    //     xmlhttp.onreadystatechange = function() {
    //         if (this.readyState == 4 && this.status == 200) {
    //
    //             alert("成功了");
    //         }
    //     }
    // }
    function add_gold(){
        $.ajax({
            url:"add_servlet",
            type:"GET",
            data:{"id":id,"gold":gold},
            success:function (data) {
                alert("您的树长大啦");
            },error:function () {
                    alert("失败了");
            }
        })
        display_gold.innerHTML = "您的金币:"+user_gold;
        tree.src = "img/树"+now_tree+"1.png";
        // tree.src = "img/圣诞头像.png";
        time = 300;
        rest_1.innerHTML = "之后，继续学习！😄";
        rest_2.innerHTML = "你已经休息了🥤";
        flag = 1;
    }
    function turn_to() {
        if(flag == 0){
            add_gold();
        }
        else{
            // tree.src = '月亮树.png';
            time = 0;
            passtime = 0;
            alert("时间到啦，继续学习");
            rest_1.innerHTML = "之后，成长为寒假树🎄";
            rest_2.innerHTML = "你已经专注了📕";
            flag = 0;
        }
    }
    function time_reduce() {
        if(time >= 0){
            time--;
            passtime++;
        }
        passtime_second.innerHTML =  passtime % 60;
        passtime_minute.innerHTML = parseInt(passtime / 60);
        minute.innerHTML = parseInt(time / 60) + " 分";
        second.innerHTML = time % 60 + "秒";
        if(time == 0)
            turn_to();
    }

    button_01.onclick = function start(){
        // tree.src = "img/彩色Log.png";
        rest_1.innerHTML = "之后，成长为寒假树🎄";
        rest_2.innerHTML = "你已经专注了📕";
        var input_second = document.getElementById("input_second").value;
        var input_minute = document.getElementById("input_minute").value;
        time = Number(input_second) + Number(input_minute) * 60;
        gold = parseInt( time / 60 );
        passtime = 0;
        if(boolean == true)
        {
            setInterval(time_reduce,1000);
            boolean = false;
        }
    }

    button_02.onclick = function start(){
        // tree.src = "img/圣诞头像.png";
        var input_second = document.getElementById("input_second").value;
        var input_minute = document.getElementById("input_minute").value;
        rest_1.innerHTML = "之后，继续学习！😄";
        rest_2.innerHTML = "你已经休息了🥤";
        time = Number(input_second) + Number(input_minute) * 60;
        flag = 1;
        passtime = 0;
        if(boolean)
        {
            setInterval(time_reduce,1000);
            boolean = false;
        }
    }
</script>
</body>
</html>